<template>
  <div class="info-container">
    <h3>{{ title }}</h3>
    <p>{{ abstract_name }}</p>
    <div class="thumbs">
      <vue-preview
        :slides="photos"
        @close="handleClose"
        class="preview"
      ></vue-preview>
    </div>

    <cmt-box :id="id"></cmt-box>
  </div>
</template>
<script>
import comment from "../subcomponents/comment.vue";
export default {
  data() {
    return {
      id: this.$route.params.id,
      title: "",
      abstract_name: "",
      photos: []
    };
  },
  created() {
    this.getPhoto();
  },
  methods: {
    getPhoto() {
      this.$http.get("getPhotoByTypeid?id=" + this.id).then(res => {
        if (res.status === 200) {
          this.title = res.body[0].title;
          this.abstract_name = res.body[0].abstract_name;
          res.body.forEach(value => {
            this.photos.push({
              src: value.img_url,
              msrc: value.img_url,
              w: 300,
              h: 200
            });
          });
        }
      });
    },
    handleClose() {
      console.log("close event");
    }
  },
  components: {
    "cmt-box": comment
  }
};
</script>

<style lang="scss" scoped>
.info-container {
  padding: 0 3px;
  h3 {
    font-size: 16px;
    text-align: center;
    color: #26a2ff;
    margin: 15px 0;
  }
  p {
    font-size: 13px;
    line-height: 30px;
  }
  .thumbs {
    /deep/ .my-gallery {
      display: flex;
      flex-wrap: wrap;
      figure {
        width: 30%;
        margin: 5px;
        img {
          width: 100%;
          height: 100px;
        }
      }
    }
  }
}
</style>
